<template>
	<view style="width: 100%;height: 100%;">
		<section class="section">
			<view class="header"
				style="
				height: 80px;
				font-size: 20px;
				align-items: flex-start;
				padding: 0px 20px;
				background-image: none;
			">
				<view id="miniName" class="header-text"
					style="
				font-size: 20px;
				color: #000;
				padding: 0px;
				line-height: 20px;
			">建华匿名信</view>
			</view>
			<!-- sms -->
			<view class="index-block" style="margin: 0px 15px 0;">
				<view class="index-block-flex"
					style="padding: 20px 0px 0px;justify-content: flex-start;margin-left: 36px;">
					<text
						style="background: #efefef;text-align: center;font-weight: 700;padding: 2px 10px;font-size: 14px;margin-right: 10px;">你瞧</text><b
						style="text-align: left;">被人记住的感觉多么美好</b>
				</view>
				<view class="index-block-flex"
					style="padding: 15px 15px 25px;">
					<view class="index-block-flex-text">
						<text
							style="display: block;font-weight: 700;
                        letter-spacing: 1px;">
							<p>是否有未曾說出口的话</p>
							<p>分手~挽回、表白~道歉</p>
							<p>被拉黑也能发送成功哦</p>
						</text> <a href="javascript:void(0);" @click="clickHref(2)"
							style="background-color: #17c304;color: #fff;border: none;border-radius: 12px;width: 120px;">开始写信</a>
					</view>
					<view class="index-block-flex-cover"
						style="background-image: url(/static/image/people.png);background-position: unset;"></view>
				</view>
			</view>

			<view
				style="margin: 10px 15px 10px;position: relative;background: white;padding: 10px;border-radius: 20px;box-shadow: 0px 3px 15px 0px rgb(189 191 191 / 30%);">
				<view style="display: flex;align-items: center;">
					<view
						style="display: inline-block;width: 16%; overflow: hidden;">
						<img class="icon" src="/static/image/hjdh.png" />
					</view>
					<view
						style="display: inline-block;width: 64%;height: 45px;overflow: hidden;">
						<h5>和解电话</h5>
						<p style="font-size: 12px;margin: 0px;">被拉黑也能打通的电话</p>
					</view>
					<view style="display: inline-block;width: 20%;">
						<a href="javascript:void(0);" @click="clickHref(1)"
							style="background-color: #ffffff00;color: #000;border: 1px solid #d9d9d9;border-radius: 50px;width: 65px;display: inline-block;line-height: 30px;font-size: 12px;text-align: center;box-sizing: border-box;">去拨打</a>
					</view>
				</view>
			</view>
			<view
				style="margin: 10px 15px 10px;position: relative;background: white;padding: 10px;border-radius: 20px;box-shadow: 0px 3px 15px 0px rgb(189 191 191 / 30%);">
				<view style="display: flex;align-items: center;">
					<view
						style="display: inline-block;width: 16%;    overflow: hidden;">
						<img class="icon" src="/static/image/rgch.png" />
					</view>
					<view
						style="display: inline-block;width: 64%;height: 45px;    overflow: hidden;">
						<h5>人工传话</h5>
						<p style="font-size: 12px;margin: 0px;">由人工帮您给Ta代为传话，更有仪式感</p>
					</view>
					<view style="display: inline-block;width: 20%;">
						<a href="javascript:void(0);" @click="clickHref(3)"
							style="background-color: #ffffff00;color: #000;border: 1px solid #d9d9d9;border-radius: 50px;width: 65px;display: inline-block;line-height: 30px;font-size: 12px;text-align: center;box-sizing: border-box;">去传话</a>
					</view>
				</view>
			</view>
		</section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '匿名信'
			});
		},
		methods: {
			clickHref(type) {
				let url = "";
				if (type == 0) {
					url = "/pages/index/index";
				} else if (type == 1) {
					url = "/pages/phone/phone";
				} else if (type == 2) {
					url = "/pages/message/message";
				} else if (type == 3) {
					url = "/pages/rgch/rgch";
				} else if (type == 4) {
					url = "/pages/my/my";
				}
				
				if (url) {
					uni.navigateTo({
						url: url
					});
				}
			}

     //原html
	// 		   function clickHref(type){
    //     url="";
    //     if(type==0){
    //         url="aindex.html"
    //     }else if(type==1){
    //         url="phone.html"
    //     }else if(type==2){
    //         url="amessage.html"
    //     }else if(type==3){
    //         url="rgch.html"
    //     }else if(type==4){
    //         url="amy.html"
    //     }
    //     window.location.href = url+"?t="+Date.now();
    // }
		}
	}
</script>

<style scoped>
/* 基础样式 */
.icon{
	width: 30px;
	height: 30px;
}
body {
    padding: 0;
    margin: 0;
    background: #fff;
}

.section {
    background: none;
    box-shadow: none;
    margin: 0;
}

a {
    text-decoration: none;
}

/* header */
.header {
    background-image: url(/static/image/back_00.png);
    background-position: center bottom;
    background-size: cover;
    height: 220px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
}

.header-text {
    text-align: center;
    color: #4286C8;
    font-size: 16px;
    font-weight: bold;
    padding-top: 15px;
}

/* 首页模块 */
.index-block {
    position: relative;
    background: white;
    border-radius: 20px;
    box-shadow: 0px 3px 15px 0px rgba(189, 191, 191, 0.3);
    margin: -30px 15px 0;
}

.index-block-flex {
    display: flex;
    padding: 25px 15px 35px;
    justify-content: center;
    align-items: center;
}

.index-block-flex-cover {
    width: 45%;
    padding-top: 37%;
    background-position: center;
    background-size: cover;
}

.index-block-flex-text {
    width: 55%;
    padding-left: 20px;
    box-sizing: border-box;
}

.index-block-flex-text p {
    margin: 0;
    line-height: 20px;
    color: #4F4F4F;
}

.index-block-flex-text a {
    display: inline-block;
    background: #eef9fb;
    border: solid 2px #333;
    margin-top: 15px;
    line-height: 36px;
    width: 130px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 20px;
}
</style>
